<template>
  <div class="reply-item">
    <div class="reply-item__avater">
      <img :src="reply.avatar" alt="logo" class="reply-item__avater__img" />
    </div>
    <div class="reply-item__comment">
      <div class="reply-item__comment__top">
        <div class="irct__left">
          <div class="irct__left__title">
            {{ reply.name }}
          </div>
          <div class="irct__left__sub-title">
            {{ reply.time + " |  来自 " }}<span class="irct__left__sub-title__right">{{ reply.device }} </span>
          </div>
        </div>
        <ThumbAndComment :tags="reply.tags" @thumbClick="handleThumbClick" @replyClick="handleReplyClick" />
      </div>
      <div class="reply-item__comment__content">
        <span class="reply-item__comment__content__pre" v-if="!!reply.replyName">
          <span style="color: rgba(0, 0, 0, 0.6)">回复</span
          ><span style="font-weight: 500">{{ reply.replyName }}:</span>
        </span>
        {{ reply.comment }}
      </div>
      <Comment v-show="commentShow" :commentWidth="600" :buttonTop="0" />
    </div>
  </div>
</template>
<script>
import ThumbAndComment from "../../components/ThumbAndComment";
import Comment from "../../components/Comment";
export default {
  name: "ReplyItem",
  props: {
    reply: {
      type: Object,
      default: {
        // 回复人名称
        name: "",
        //头像
        avatar: "",
        // 时间
        time: "",
        // 设备
        device: "",
        // 评论
        comment: "",
        // 点赞次数
        tags: 0
        // 是否展示评论
      }
    }
  },
  components: {
    ThumbAndComment,
    Comment
  },
  methods: {
    handleReplyClick() {
      this.commentShow = !this.commentShow;
    },
    handleThumbClick() {}
  },
  data() {
    return {
      commentShow: false
    };
  }
};
</script>
<style lang="scss" scoped>
.reply-item {
  padding: 16px 24px;
  display: flex;
  .reply-item__avater {
    margin-right: 8px;
    &__img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .reply-item__comment {
    flex: 1;
    &__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .irct__left {
        .irct__left__title {
          font-weight: 500;
        }
        .irct__left__sub-title {
          font-size: 10px;
          opacity: 0.6;
          &__right {
            font-size: 0.1rem;
            font-family: Gotham-Book;
            font-weight: 300;
          }
        }
      }
    }
    &__content {
      padding-top: 8px;
    }
  }
  .reply-item__more--none {
    padding-left: 24px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    opacity: 0.6;
  }
  .reply-item__more {
    padding-bottom: 16px;
    padding-left: 24px;
    display: flex;
    align-items: center;
    .reply-item__more__pre {
      color: $color-royole;
    }
  }
  .reply-item__more__img {
    display: flex;
    width: 25px;
    height: 25px;
    cursor: pointer;
  }
}
</style>
